<template>
  <div>
    <el-dialog
      :visible="dialogVisible"
      @close="handleClose()"
      :fullscreen="true"
    >
      <div slot="title">
        <span>{{ transferParams.dialogTitle }}</span>
      </div>
      <el-form :rules="rules" :model="question" ref="question">
        <el-form-item
          label="试题名"
          :label-width="formLabelWidth"
          prop="questionName"
        >
          <el-input
            v-model="question.questionName"
            autocomplete="off"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="整题解析"
          prop="oriPrice"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="question.analysis"
            :precision="1"
            :max="999999"
            type="textarea"
            heigth="200px"
            :disabled="disabled"
          />
        </el-form-item>
      </el-form>
      <!-- 单选题 -->
      <div v-if="question.questionType == 1">
        <el-table
          :data="question.questionAnswerList"
          :border="true"
          style="width: 100%"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column type="index" width="120" label="是否答案">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.questionAnswerOption"
                >答案</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column label="选项" width="120" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.questionAnswerOption"
                :disabled="true"
                style="text-align: center"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.questionAnswerName"
                type="textarea"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 多选题 -->
      <div v-if="question.questionType == 3">
        <el-table :data="question.questionAnswerList" :border="true" style="width: 100%">
          <el-table-column label="是否答案" width="120" align="center">
            <template slot-scope="scope">
              <el-checkbox
                :checked="scope.row.isRight == 0 ? false : true"
                >答案</el-checkbox
              >
            </template>
          </el-table-column>
          <el-table-column label="选项" width="120" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.questionAnswerOption"
                :disabled="true"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input v-model="scope.row.questionAnswerName" type="textarea" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 判断题 -->
      <div v-if="question.questionType == 2">
        <el-table
          :data="question.questionAnswerList"
          :border="true"
          style="width: 100%"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column type="index" width="120" label="是否答案">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.questionAnswerOption"
                >答案</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column label="选项" width="120" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.questionAnswerOption"
                :disabled="true"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input v-model="scope.row.questionAnswerName" type="textarea" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 填空题 -->
      <div v-if="question.quType == 4">
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="small"
          plain
          @click="handleAdd"
          ref="selectLable"
          :disabled="disabled"
        >
          添加
        </el-button>
        <el-table :data="question.quAnswers" :border="true" style="width: 100%">
          <el-table-column label="是否答案" width="120" align="center">
            <template slot-scope="scope">
              <el-checkbox
                :checked="scope.row.isRight == 0 ? false : true"
                >答案</el-checkbox
              >
            </template>
          </el-table-column>

          <el-table-column label="答案内容">
            <template slot-scope="scope">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="scope.row.quAnswerContent"
                :disabled="disabled"
              >
              </el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import { Message } from "element-ui";
import { nextTick } from "vue";
import { getQuestionInfo} from "@/api/question/index";

export default {
  data() {
    return {
      radio: "A",
      transferParams: {},
      selType: 0,
      value: "",
      questionId:0,
      //提交的数据
      question: {
        quId: "",
        content: "",
        quType: "",
        quTypeName: "",
        levelId: "",
        analysis: "",
        answerCorrect: 0,
        quAnswerContent: [],
        answerAnalysis: "",
        quAnswers: [],
        isAnswer: [],
        quBankId: "",
      },
      option: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"],
      //题库数据
      formLabelWidth: "120px",
      dialogVisible: false,
    };
  },
  mounted() {},
  created() {
  },
  methods: {
    //获取数据详情
    queryQuInfo() {
      getQuestionInfo({
        questionId: this.questionId,
      }).then((res) => {
        console.log(res);
        if (res.code === 200) {
          //数据回显
          const result = res.data;
          this.question = result;
          if (result.quAnswers === undefined) {
            this.question.quAnswers = [];
          } else {
            this.question.quAnswers = result.quAnswers;
          }
        }
      });
    },
  
    //显示弹窗
    show(questionId) {
      this.dialogVisible = true;
      //数据详情
      this.questionId = questionId;
      this.queryQuInfo();
    },
    //关闭弹窗queryQuType 
    handleClose() {
      this.dialogVisible = false;
      //清空表单
      this.clearFrom();
      //刷新列表
      this.$parent.queryAll();
    },
   
    //下拉框事件
    getQuTypes(value) {
      this.question.questionType = value;
      this.question.quAnswers = [];
      this.optionIndex = 0;
      //传递考题类型名称
      if (value == 1) {
        this.question.quTypeName = "单选题";
      } else if (value == 2) {
        this.question.quTypeName = "多选题";
      } else if (value == 3) {
        this.question.quTypeName = "判断题";
      } else if (value == 4) {
        this.question.quTypeName = "填空题";
      } else if (value == 5) {
        this.question.quTypeName = "简答题";
      }
    },

    //校验表单参数
    checkFormParams() {
      if (
        this.question.quAnswers === undefined &&
        this.question.quAnswers.length <= 0
      ) {
        this.$message("答案不能为空");
      }
    },
    //校验表单参数
    getFormParams() {
      let array = this.question.quAnswers;
      for (let inedx in array) {
        array[inedx].answerCorrect = array[inedx].answerCorrect ? 1 : 0;
      }
    },
    //清空表单
    clearFrom() {
      (this.quTypes = []),
        (this.quLevel = []),
        (this.selType = 0),
        (this.value = ""),
        (this.question.quId = ""),
        (this.question.content = ""),
        (this.question.quType = ""),
        (this.question.levelId = ""),
        (this.question.analysis = ""),
        (this.question.answerCorrect = 0),
        (this.question.quAnswerContent = []),
        (this.question.isAnswer = []),
        (this.question.quBankId = ""),
        (this.quBank = []);
      this.disabled = true;
    },
    resize() {},

    //单选
    handleCurrentChange(val) {
      this.radio = val.answerOption;
      for (let i = 0; i < this.question.quAnswers.length; i++) {
        if (this.question.quAnswers[i] === val) {
          this.question.quAnswers[i].answerCorrect = 1;
        } else {
          this.question.quAnswers[i].answerCorrect = 0;
        }
      }
      console.log(this.question.quAnswers);
    },
  },
};
</script>
  <style scoped></style>